<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增论文信息')" />
    <style>
        /* 加载遮罩层样式 */
        .loading-mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            z-index: 9999;
            display: none;
            justify-content: center;
            align-items: center;
        }

        /* 加载动画容器 */
        .loading-container {
            text-align: center;
        }

        /* 旋转图标 */
        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }

        /* 旋转动画 */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 加载文字 */
        .loading-text {
            color: #333;
            font-size: 16px;
            margin-top: 10px;
        }
    </style>
</head>
<body class="white-bg">
<!-- 加载遮罩层 -->
<div class="loading-mask" id="loadingMask">
    <div class="loading-container">
        <div class="loading-spinner"></div>
        <div class="loading-text">正在提交，请稍候...</div>
    </div>
</div>

<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-paper-add">
        <!-- 原表单内容保持不变 -->
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">论文名称：</label>
                <div class="col-sm-8">
                    <input name="paperTitle" id="paperTitle" class="form-control" type="text" placeholder="请输入论文名称">
                </div>
            </div>
        </div>

        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">论文作者：</label>
                <div class="col-sm-8">
                    <input name="paperAuthor" class="form-control" type="text" placeholder="请输入作者姓名（多人用逗号分隔）">
                </div>
            </div>
        </div>

        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">上传论文文件：</label>
                <div class="col-sm-8">
                    <input type="file"
                           name="paperFile"
                           id="paperFile"
                           class="form-control"
                           accept=".doc,.docx"
                           placeholder="仅支持.doc/.docx格式">
                    <small class="text-muted">仅支持Word文档格式（.doc/.docx）</small>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var prefix = ctx + "system/pass";

    // 初始化表单验证（仅验证必填项）
    $("#form-paper-add").validate({
        rules: {
            paperTitle: { required: true },
            paperAuthor: { required: true },
            paperFile: { required: true }
        },
        messages: {
            paperTitle: "论文名称不能为空",
            paperAuthor: "作者信息不能为空",
            paperFile: "请上传论文文件"
        },
        focusCleanup: true
    });

    // 文件选择后自动回填文件名到论文名称输入框
    document.getElementById('paperFile').addEventListener('change', function(e) {
        const fileInput = e.target;
        if (fileInput.files.length > 0) {
            const fileName = fileInput.files[0].name.split('\\').pop().split('/').pop();
            const titleWithoutExt = fileName.replace(/\.(doc|docx)$/i, '');
            document.getElementById('paperTitle').value = titleWithoutExt;
        }
    });

    // 提交处理函数（新增加载动画控制）
    function submitHandler() {
        if ($.validate.form()) {
            // 显示加载遮罩
            document.getElementById('loadingMask').style.display = 'flex';

            const formData = new FormData($('#form-paper-add')[0]);
            $.ajax({
                url: prefix + "/add",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(result) {
                    // 请求完成后隐藏加载遮罩
                    document.getElementById('loadingMask').style.display = 'none';
                    $.operate.successCallback(result);
                },
                error: function(error) {
                    // 请求失败后隐藏加载遮罩
                    document.getElementById('loadingMask').style.display = 'none';
                    $.modal.alertError("系统错误");
                }
            });
        }
    }
</script>
</body>
</html>
